<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/5/15
  Time: 9:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"  %>
<html>
<head>
    <title>商品</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">

    <modal v-model="addFlag" title="添加商品" @on-ok="add">

        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="供应商:">
                <i-select v-model="goods.providerId" style="width: 110px">
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
           <%-- <form-item label="商品编号:">
                <i-input v-model="goods.code"size="large"/>
            </form-item>--%>
            <form-item label="商品名:">
                <i-input v-model="goods.name"size="large"/>
            </form-item>
            <form-item label="商品描述:">
                <i-input v-model="goods.pdesc"size="large"/>
            </form-item>
            <form-item label="产地:">
                <i-input v-model="goods.producer"size="large"/>
            </form-item>
            <form-item label="进货价格:">
                <i-input v-model="goods.purchasePrice"size="large"/>
            </form-item>
            <form-item label="销售价格:">
                <i-input v-model="goods.sellingPrice"size="large"/>
            </form-item>
            <form-item label="单位:">
                <i-input v-model="goods.unit"size="large"/>
            </form-item>

            <form-item label="商品类型:">
                <i-select v-model="goods.typeId" style="width: 110px">
                    <i-Option v-for="item in typeList" :value="item.id" :key="item.id">{{item.type1}}</i-Option>
                </i-select>
            </form-item>
        </i-form>
    </modal>

    <modal v-model="updateFlag" title="修改商品" @on-ok="update()">
        <i-form :label-width="80" style="padding:30px">
            <form-item label="供应商:">
                <i-select v-model="goods.providerId" style="width: 110px">
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
           <%-- <form-item label="商品编号:">
                <i-input v-model="goods.code"size="large"/>
            </form-item>--%>
            <form-item label="商品名:">
                <i-input v-model="goods.name"size="large"/>
            </form-item>
            <form-item label="商品描述:">
                <i-input v-model="goods.pdesc"size="large"/>
            </form-item>
            <form-item label="产地:">
                <i-input v-model="goods.producer"size="large"/>
            </form-item>
            <form-item label="进货价格:">
                <i-input v-model="goods.purchasePrice"size="large"/>
            </form-item>
            <form-item label="销售价格:">
                <i-input v-model="goods.sellingPrice"size="large"/>
            </form-item>
            <form-item label="单位:">
                <i-input v-model="goods.unit"size="large"/>
            </form-item>
            <form-item label="商品类型:">
                <i-select v-model="goods.typeId" style="width: 110px">
                    <i-Option v-for="item in typeList" :value="item.id" :key="item.id">{{item.type1}}</i-Option>
                </i-select>
            </form-item>
            <form-item label="更新时间">
                <date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" v-model="goods.modifyDate" size="large"/>
            </form-item>
        </i-form>

    </modal>
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="70">
                    <form-item label="供应商:">
                        <i-select v-model="goodsVo.providerId" style="width: 110px">
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="商品类型:">
                        <i-select v-model="goodsVo.typeId" style="width: 110px">
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in typeList" :value="item.id" :key="item.id">{{item.type1}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="商品名:">
                        <i-input type="text" v-model="goodsVo.name"/>
                    </form-item>
                   <%-- <form-item label="商品编码:">
                        <i-input type="text" v-model="goodsVo.code"/>
                    </form-item>--%>
                   <%-- <form-item label="商品描述:">
                        <i-input type="text" v-model="goodsVo.pdesc"/>
                    </form-item>--%>

                 <%--   <form-item label="产地:">
                        <i-input type="text" v-model="goodsVo.producer"/>
                    </form-item>--%>
                    <form-item label="单位:">
                        <i-input type="text" v-model="goodsVo.unit"/>
                    </form-item>
                    <form-item label="进货价格:">
                            <col span="11"> <i-input type="text" v-model="goodsVo.spurchasePrice"/></col>
                        <%--<col span="11"> <i-input type="text" v-model="goodsVo.epurchasePrice"/> </col>--%>
                    </form-item>
                    <form-item label="-">
                        <col span="11"> <i-input type="text" v-model="goodsVo.epurchasePrice"/> </col>
                    </form-item>
                    <form-item label="销售价格:">
                        <col span="12"> <i-input type="text" v-model="goodsVo.ssellingPrice"/></col>
                    </form-item>
                    <form-item label="-">
                        <col span="12"> <i-input type="text" v-model="goodsVo.esellingPrice"/></col>
                    </form-item>
                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>

    <card>
            <i-button type="success" @click="toAdd">添加商品</i-button>
    </card>
    <i-table :columns="columns" :data="pageResult.rows"  :height="300"  @on-selection-change="tableSelection=arguments[0]"  border stripe>
        <template slot-scope="{row}" slot="proName">
            <span>{{row.provider.proName}}</span>
        </template>
        <template slot-scope="{row}" slot="type">
            <span>{{row.goodsType.type1}}</span>
        </template>
        <template slot-scope="{row,index}"  slot="action">
                <i-button type="warning" @click="toUpdate(row)" size="small">修 改</i-button>
                <i-button type="error" @click="del(row,index)" size="small">删 除</i-button>
        </template>

    </i-table>

    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];search();"
          show-sizer
          :page-size-opts="[5,10,15]"
          @on-page-size-change="pageSize=arguments[0];search();"
    />


</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                // {type:"selection",width:60,align:"center"},//自动开启多选功能
                { slot:"proName",title:"供应商",width:300},
                // { key:"code",title:"商品编码"},
                {key:"name",title:"商品名",width:200},
                // {key:"pdesc",title:"商品描述"},
                {key:"producer",title:"产地"},
                {title:"进货价格",key: "purchasePrice"},
                {title:"销售价格",key: "sellingPrice"},
                {title:"单位",key: "unit"},
                {slot:"type",title:"商品类型"},
                {title:"操作",slot:"action",width:300}
            ],
            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:5,
            providerList:[],
            typeList:[],
            tableSelection:[],
            goodsVo:{},
            goods:{},
            addFlag:false,
            updateFlag:false
        },
        methods:{
            search(){
                axios.get(`${ctx}/sys/goods/search/${this.pageNo}/${this.pageSize}`,{params:this.goodsVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchProvider(){
                axios.get(`${ctx}/sys/provider/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
            searchGoodsType(){
                axios.get(`${ctx}/sys/goodstype/list`)
                    .then(({data})=>{
                        console.log(data.result)
                        this.typeList=data.result;
                    });
            },

            toAdd(){
                this.goods = {};
                this.addFlag=true;

            },
            add(){
                axios.post(`${ctx}/sys/goods/add`,this.goods)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();

                    });
                axios.get(`${ctx}/sys/goods/faind`)
                    .then(({data})=>{
                        this.data=data.result;
                        this.addFlag=false;//关闭模态框
                    });
                axios.get(`${ctx}/sys/goods/fan`)
                    .then(({data})=>{
                        this.data=data.result;
                        this.addFlag=false;//关闭模态框
                    });
            },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/sys/goods/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                _this.search();

                            });
                    }
                });
            },
            toUpdate(row){
                this.goods=row;
                this.updateFlag=true;
            },
            update(){
                let params=Qs.stringify(this.goods,{serializeDate:(date)=>{
                        return moment(date).format("YYYY-MM-DD HH:mm:ss");
                    }});
                axios.post(`${ctx}/sys/goods/update`,Qs.parse(params))
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });
            },

        },
        mounted(){
            this.search();
            this.searchProvider();
            this.searchGoodsType();


        }
    });
</script>
</body>
</html>
